<template>
    <section class="server_chore_base_info">
    		<div class="base_info">
  			<el-form ref="form" :model="form"  :rules="rules" label-width="140px" label-position="left">
  				  <el-form-item label="服务名称" required   prop="name">
				    <el-input  placeholder="请输入服务名称" v-model="form.name" style="width: 380px;"></el-input>
				  </el-form-item>
				   <el-form-item label="服务标识" required>
				    <el-input  placeholder="由系统自动生成" :disabled="true" style="width: 380px;"></el-input>
				  </el-form-item>
				  <el-form-item label="描述" >
				    <el-input  placeholder="请输入描述" v-model="form.describe" style="width: 680px;"></el-input>
				  </el-form-item>
				  <el-form-item label="编排类型" required  prop="type">
				    <el-radio-group v-model="form.type" class="radio_diy" @change="changeGuanXi">
				      <el-radio-button label="3">依赖关系</el-radio-button>
				      <el-radio-button label="4">组合关系</el-radio-button>
				    </el-radio-group>
				  </el-form-item>
				  <el-form-item label="资源所在网段" required prop="segmentId">
				    <el-radio-group v-model="form.segmentId" class="radio_diy" @change ="chooseResource">
				      <el-radio-button label="2" 
				      	 v-for="(item,index) in segment"
				      	 :label="item.id" :value="item"
				      >{{item.name}}</el-radio-button>
				    </el-radio-group>
				  </el-form-item>
				  <el-form-item label="选择服务资源" required v-show="form.type==3">
				    <el-radio-group v-model="form.name4" class="radio_diy">
				      <el-radio-button label="2">按业务类型筛选</el-radio-button>
				      <el-radio-button label="3">按名称搜索</el-radio-button>
				    </el-radio-group>
				      <el-input v-show="form.name4==3" placeholder="按名称搜索资源" v-model="form.searchName" style="width: 180px;"></el-input>
				 	 <el-button v-show="form.name4==3" type="primary" @click="searchName" class="button_diy">搜索</el-button>
				  </el-form-item>
				  
				 <el-form-item label="业务类型" required v-show="form.type==3" v-if="form.name4==2">
				     <el-checkbox-group @change="changeResource" v-model="form.businessType" class="checkbox_diy">
					      <el-checkbox-button 
					      	class="box_checkbox"
					      	v-for="(item,index) in treeSeach.business_type"
					      	  :label="String(item.id)" :value="item">{{item.name}}
					      </el-checkbox-button>
					  </el-checkbox-group>
				  </el-form-item>
				 
				  <el-form-item label="信息类型" required v-show="form.type==3" v-if="form.name4==2">
				     <el-checkbox-group  @change="changeResource" v-model="form.infoType" class="checkbox_diy">
					   	   <el-checkbox-button 
					      	class="box_checkbox"
					      	v-for="(item,index) in treeSeach.info_type"
					      	  :label="String(item.id)" :value="item">{{item.name}}
					      </el-checkbox-button>
					  </el-checkbox-group>
				  </el-form-item>
				  
				  <el-form-item label="选择资源" required v-show="form.type==3" >
				    <el-radio-group v-model="form.parentResouceServiceId" 
				    	:class="{'overHidden':showMore}"
				    	class="radio_diy " 
				    	id="overHidden">
				      <el-radio-button :label="item.id" v-for="item in resources">{{item.name}}</el-radio-button>
				    </el-radio-group>
				    <p style="text-align: center;">
				    	 <i class="el-icon-caret-bottom showMore" v-show="showMore"></i>
				    </p>
				   
				  </el-form-item>
				  
				  <el-form-item label="请求参数" required v-show="form.type==4">
				   	<el-checkbox-group v-model="form.name9" class="checkbox_diy">
					      <el-checkbox-button v-for="(item,index) in metaData" :label="item" :key="index">{{item.name}}</el-checkbox-button>
					</el-checkbox-group>
					  <p style="color: #8B8B8B;font-size: 12px;">您已选择(可多选)：</p>
					 <el-checkbox-group v-model="form.name10" class="checkbox_diy">
					      <el-checkbox-button v-for="city in form.name9" :label="city.name" disabled :key="city.id">{{city.name}}</el-checkbox-button>
					</el-checkbox-group>
				  </el-form-item>
  			</el-form>
  			<el-button type="primary" @click="nextStep" class="button_diy">下一步</el-button>
  		</div>
    </section>
</template>

<script>
    import {
    	computedServiceSearch,
    	computedMetaDataSearchByType,
    	computedSegmentSearch
    } from "../../css_js_img/computedSmartResource"
    import {
    	componentServerRegisterGetFabuArea
    } from "@/views/serverResource/common/js_css_img/serverResourceComputed"
    export default {
    	props:{
    		treeSeach:Object,
    		baseInfoForm:Object
    	},
        data() {
          return {
          		showMore:false,
          		loading:'',
          		fabuAreaRadio:[],
          		segment:[],
          		form:{
          			name:'',
          			describe:'',
          			segmentId:'',
          			businessType:[],
          			infoType:[],
          			type:'',
          			parentResouceServiceId:'',
          			searchName:"",
          			name4:'',
          			name7:'',
          			name9:[],
          		},
          		resources:[],
          		metaData:[],
          		cities: [],
          		rules: {
                    name: [
                        { required: true, message: '请输入服务名称', trigger: 'blur' },
                        { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                    ],
                    segmentId: [
                        { required: true, message: '请选择资源所在网段', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择编排关系', trigger: 'blur' },
                    ],
                },
          };
        },
        methods: {
        		nextStep(){/*下一步之前先做验证*/
        			this.$refs['form'].validate((valid)=>{
        				if(valid){
                           this.$emit('nextStep',{val:1,form:this.form,farea:this.fabuAreaRadio});
                        }else{
                            this.$message({
                                showClose: true,
                                message: '请填写完必要信息',
                                type: 'error'
                            });
                            return false;
                        }
        			})
        			
        		},
        		changeGuanXi(val){/*改成组合或者依赖*/
        			this.$emit('changeGuanXi',val);
        		},
        		changeResource(){
        			if(this.form.infoType.length==0||this.form.businessType.length==0){
        				return false;
        			}else{
        				computedServiceSearch(this);
        			}
        		},
        		searchName(){
        			computedServiceSearch(this);
        		},
        		chooseResource(val){
        			console.log(val);
        			componentServerRegisterGetFabuArea(this,val)
        		},
        		dealUpdata(newVal){
        				console.log(newVal)
        				this.form.name = newVal.name
		        		this.form.describe = newVal.describe
		        		this.form.segmentId = newVal.segmentId
		        		componentServerRegisterGetFabuArea(this,newVal.segmentId)
		        		this.form.type = newVal.type
		        		this.changeGuanXi(newVal.type);
		        		this.form.nodeIds = newVal.nodeIds
		        		this.form.businessType = newVal.businessType.split(',')
		        		this.form.infoType = newVal.infoType.split(',')
		        		this.form.parentResouceServiceId = newVal.parentResouceServiceId
		        		if(newVal.type==4){
		        			this.form.name9 = newVal.smMetaData;
		        		}
		        		
        		}
        },
        updated(){
        	let oHeight = document.getElementById("overHidden").offsetHeight;
        	oHeight>80?this.showMore = true:this.showMore = false;
        },
        mounted(){
        	computedMetaDataSearchByType(this,2);/*获取共享类的元数据*/
        	computedSegmentSearch(this);/*获取网段，新的接口*/
        	console.log(this.baseInfoForm)
        	if(this.baseInfoForm.name!=''){
        		this.dealUpdata(this.baseInfoForm)
        	}
        },
        watch:{
        	baseInfoForm:{
        		handler(newVal){
        			if(newVal.name!=''){
		        		this.dealUpdata(newVal)
		        	}
        		},
        		deep:true
        	}
        }
        
  };
</script>

<style >
 section.server_chore_base_info {
 	height: 100%;
 	/*overflow-y: scroll;*/
 }
 section.server_chore_base_info .base_info{
	background: #fff;
	margin-top: 10px;
	padding: 15px;
}
 section.server_chore_base_info .radio_diy .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #fff;
    color: #2576C5;
    border-color: #2576C5;
}
 section.server_chore_base_info .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background: #2576C5;
    border-color: #2576C5;
}
 section.server_chore_base_info .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
    border-left-color: #2576C5;
}

section.server_chore_base_info .button_diy.el-button--primary {
    color: #fff;
    background-color: #2576C5;
    border-color: #2576C5;
}
section.server_chore_base_info .showMore {
    font-size: 35px;
    color: #2576c5;
    cursor: pointer;
}
    section.server_chore_base_info  .box_checkbox{
    	margin: 5px !important;
    }
     section.server_chore_base_info  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    section.server_chore_base_info .overHidden {
	    height: 80px;
	    overflow-y: hidden;
	}
</style>